<%--
  Created by IntelliJ IDEA.
  User: hkw14
  Date: 2021/4/30
  Time: 14:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工列表</title>
    <link rel="stylesheet" href="${ctx}/resource/layui/css/layui.css">
</head>
<body>
<div class="layui-container">
    <%--    搜索内容--%>
    <div>
        <div class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">
                        姓名
                    </label>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="用户账号" id="realName"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">
                        部门
                    </label>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="用户名称" id="departmentID"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">
                        性别
                    </label>
                    <div class="layui-input-inline">
                        <select id="sex">
                            <option value="">请选择性别</option>
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" id="searchBtn">查询</button>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <%--    显示区域--%>
    <div>
        <table id="dataTable" lay-filter="dataTableFilter"></table>
    </div>
</div>
<!-- 头工具栏 -->
<script type="text/html" id="headBtns">
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除员工</button>
</script>
<!-- 行工具栏 -->
<%--<script type="text/html" id="rowBtns">--%>
<%--    <button class="layui-btn layui-btn-sm layui-btn-warm layui-btn-fluid" lay-event="reset">重置密码</button>--%>
<%--</script>--%>
<script src="${ctx}/resource/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form','jquery','table','layer'],function () {
        //初始化对象
        var form = layui.form;
        var  $ = layui.jquery;
        var  table = layui.table;
        var  layer = layui.layer;
        //初始化表格
        var t = table.render({
            id:"dataTableId",
            elem:'#dataTable',//表格容器
            url:"emp.do?service=list",//数据接口
            page:true,//开启分页
            height:550,
            toolbar:"#headBtns",
            //表头信息
            cols:[[
                {type:"checkbox",width:"80"},
                {field:"iD",title:"员工ID",width:"80"},
                {field:"userName",title:"员工",width:"100"},
                {field:"password",title:"员工",width:"100"},
                {field:"realName",title:"真实姓名",width:"100"},
                {field:"role",title:"用户权限",width:"100",templet:function(d){
                        if(d.role == 1){
                            return "<font color='red'>管理员</font>";
                        }else if(d.role == 2){
                            return "<font color='green'>业务员</font>"
                        }else{
                            return "";
                        }}
                },
                {field: 'isDel', title: '状态', width:80,templet:function(d){
                        if(d.isDel == 1){
                            return "<font color='green'>有效</font>";
                        }else if(d.isDel == 2){
                            return "<font color='gray'>无效</font>"
                        }else{
                            return "";
                        }
                    }},
                {field: 'createTime', width:160,title: '创建时间',templet:"<div>{{layui.util.toDateString(d.createTime)}}</div>"},
                {field: 'modifyTime', width:160,title: '修改时间',templet:"<div>{{layui.util.toDateString(d.modifyTime)}}</div>"},
                {title:'操作',width:200,toolbar:"#rowBtns"}
            ]],
            parseData:function (res) {//数据格式解析
                return{
                    "code":res.code,
                    "msg":res.msg,
                    "count":res.data.count,
                    "data":res.data.list
                };
            },
            response:{//设置相应码
                statusCode: 200 //规定成功的状态码，默认：0
            }
        });

        //搜索按钮事件
        $("#searchBtn").click(function(){
            var userName = $("#userName").val();
            var realName = $("#realName").val();
            var role = $("#role").val();

            console.log(userName + realName);
            t.reload({
                where:{
                    'userName':userName,
                    'realName':realName,
                    'role':role
                }
            });
        });

        table.on("toolbar(dataTableFilter)",function(d){
            var event = d.event;
            //新增用户
            if(event == 'del'){//批量删除
                //获取选中的数据
                var checkStatus = table.checkStatus('dataTableId');
                var data = checkStatus.data;
                if(data.length == 0){
                    layer.msg("请选择要删除的数据");
                    return false;
                }
                //拼接要传输给后台的id参数
                var ids = "";
                for(var i=0;i<data.length;i++){
                    ids = ids+"ID="+data[i].iD+"&"
                    // alert(ids);
                }
                layer.confirm("你确定要删除吗?",function(index){
                    $.post("user.do?type=delete&"+ids,function(rs){
                        if(rs.code != 200){
                            layer.msg(rs.msg);
                        }else{
                            layer.msg("删除成功");
                            //关闭弹层
                            layer.close(index);
                            //重新加载数据
                            $("#searchBtn").click();
                        }
                    });

                });
            }
        });
        //行工具栏事件监听
        table.on("tool(dataTableFilter)",function(d){
            var event = d.event;
            var data = d.data;
            // 确认框是否重置
            //将用户id 传给后台
            //后台修改用户的密码
            //重置成功  或者 失败
            //展示重置操作信息
            //刷新数据
            if(event == 'reset'){
                //用户的ID
                var id = data.id;
                if(data.isDel == 2){
                    layer.msg("该用户已失效,无需重置密码!");
                    return false;
                }
                layer.confirm("确认重置密码吗?",function(index){
                    $.post("user.do?type=reset",{'id':data.iD},function(rs){
                        if(rs.code != 200){
                            layer.msg(rs.msg);
                        }else{
                            layer.msg("密码已重置");
                            //关闭弹层
                            layer.close(index);
                            //重新加载数据
                            $("#searchBtn").click();
                        }
                    });

                });
            }

        });
    });
</script>
</body>
</html>
